<template>
	<view>
		<view class="none" v-if="isPage">没有内容</view>
		<view class="article-content" v-else>
			<navigator hover-class="false" :url="'../articleModule/newarticle-detail?stateType=0&addType=9&top=1&article_id='+item.article_id"
				class="article-body" v-for="(item ,index) in list" :key="index">
				<!-- #原创发布图片视频显示开始 -->
				<view class="article-img" v-if="item.img_url && item.type == 1">
					<image :src="item.img_url" mode="aspectFill"></image>
				</view>
				<template v-if="!item.img_url && item.type == 1">
					<view class="article-img" v-if="item.article_video == 1 && item.imgList && item.imgList.length > 0 && (!item.videoList || (item.videoList && item.videoList.length == 0))">
						<image :src="item.imgList[0]" mode="aspectFill"></image>
					</view>
					<view class="videoBg" v-if="((item.article_video == 1 && item.videoList && item.videoList.length > 0) || item.article_video == 2)">
						<image :src="item.videoImage_url" mode="aspectFill"></image>
						<i class="iconfont iconbofang"></i>
					</view>
				</template>
				<!-- 原创发布图片视频显示结束# -->
				<!-- #转发开始 -->
				<template v-if="item.type == 2">
					<view class="article-img" v-if="item.fowImgUrl">
						<image :src="item.fowImgUrl" mode="aspectFill" @error="errorImg(item)"></image>
					</view>
					<view class="videoBg" v-if="item.videoImage_url">
						<image :src="item.videoImage_url" mode="aspectFill"></image>
						<i class="iconfont iconbofang"></i>
					</view>
				</template>
				<!-- 转发结束# -->
				<view class="article-title">{{item.title}}</view>
				<view class="article-message" v-if="item.article_video == 1 && item.type == 1" v-html="item.content"></view>
				<view class="article-message" v-if="item.article_video == 1 && item.type == 2" v-html="item.subhead_content"></view>
			</navigator>
			<uni-load-more v-if="list.length >= 6" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	export default {
		data() {
			return {
				myId: uni.getStorageSync('userInfo').id,
				user_id: '',
				list: [],
				page: 1,
				reload: true,
				isPage: false, //是否为空列表
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/articleModule/newarticle-release'
			})
		},
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.isPage = false;
			this.list = [];
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getList();
			}, 500);
		},
		onLoad(e) {
			if (e.user_id) {
				this.user_id = e.user_id;
			} else {
				this.user_id = this.myId;
			}
			if (this.user_id != this.myId) {
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0, {
					width: '0',
					text: ''
				});
				// #endif
			}
		},
		onShow() {
			this.page = 1;
			this.reload = true;
			this.isPage = false;
			this.list = [];
			this.getList();
		},
		methods: {
			/* 获取文章列表 */
			getList() {
				var data = {
					page: this.page,
					pagesize: 10,
					users_type: 1,
					is_draft: 1
				}
				if (this.user_id && this.user_id != this.myId) {
					data.user_id = this.user_id;
					data.is_check = 2;
				} else {
					data.is_user = 1;
				}
				this.$api.apiPost('user/article.Lists/articleList', data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						list = util.artHandle(list);
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getLeftTime(list[i].creat_time);
							if (list[i].subhead_creat_time) {
								list[i].ftime = util.getLeftTime(list[i].subhead_creat_time);
							}
						}
						this.list = this.reload ? list : this.list.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						this.page = this.page == 1 ? this.page : this.page -= 1
						if (this.reload) {
							this.list = [];
						} else {
							this.status = 'noMore';
						}
					}
					for (var i = 0; i < this.list.length; i++) {
						if (this.list[i].subhead_content){
							/* 单单取出富文本src里的路径 */
							let url = this.list[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/.*src="/g,'').replace(/".*/g,'')
							console.log(url);
							/* this.list[i].subhead_content = this.list[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/<.*src=\"/g,'').replace(/\".*>/g,'') */
							if (url.indexOf('.jpg') != -1){
								this.list[i].fowImgUrl = url
							}else if(url.indexOf('.mp4') != -1){
								let num =Math.round(Math.random() * 3);		//随机生成背景图索引
								this.list[i].videoImage_url = this.artBgs[num];
							}
							/* console.log(this.list[i]); */
							this.list[i].subhead_content = this.list[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/<video.*video>/g,'').replace(/<img.*">/g,'')
						}
					}
				})
			},
			/* 图片加载错误时 */
			errorImg(item){
				
			}
		}
	}
</script>

<style lang="scss">
	.none {
		color: #333333;
		font-size: 30upx;
		margin-top: 500upx;
		width: 100%;
		text-align: center;
	}

	.article-content {
		padding: 30upx 30upx 100upx;
		width: calc(100% - 60upx);

		.article-body {
			border-bottom: 2upx solid #DCDFE6;
			padding: 40upx 0;

			.article-img {
				width: 100%;
				height: 360upx;
				border-radius: 16upx;
				margin-bottom: 20upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 16upx;
				}
			}

			.article-title {
				width: 100%;
				color: #333333;
				font-size: 30upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.article-message {
				margin-top: 12upx;
				width: 100%;
				color: #666666;
				font-size: 22upx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3; // 行数
				word-break: break-word;
				line-height: 16px;
				max-height: 48px;
			}

			.videoBg {
				position: relative;
				margin: 20upx 0;
				width: 100%;
				height: 388upx;
				border-radius: 10upx;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 10upx;
				}

				& i {
					position: absolute;
					z-index: 9;
					color: #FFFFFF;
					font-size: 80upx;
					background: rgba(0,0,0,0.5);
					width: 100%;
					height: 100%;
					border-radius: 10upx;
					display: inline-flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
